<template>
  <view class="tixian">
    <view class="top">
      <image src='../../static/businessImg/back.png' class="topback" @click="back">
      </image>
      <view class="topname">
        入驻申请
      </view>
    </view>

    <view class="tixiancenter">


      <view class="tixiancenteritem">
        <view class="tixiancenteritem1">
          店铺名称
        </view>

        <input class="tixiancenteritem2" style="color: #0D182E;" placeholder="请填写店铺名称" v-model="storeName">

      </view>
      <view class="tixiancenteritem" style="margin-top: 38rpx;">
        <view class="tixiancenteritem1">
          申请人姓名
        </view>

        <input class="tixiancenteritem2" style="color: #0D182E;" placeholder="请填写申请人姓名" v-model="name">

      </view>

      <view class="tixiancenteritem" style="margin-top: 38rpx;">
        <view class="tixiancenteritem1">
          联系电话
        </view>
        <input class="tixiancenteritem2" style="color: #0D182E;" placeholder="请填写联系方式" v-model="phone">

        </input>
      </view>







      <!-- <view class="tixiancenteritem" style="margin-top: 38rpx;">
				<view class="tixiancenteritem1">
					身份证号
				</view>
				<input class="tixiancenteritem2" placeholder="请填写身份证号" v-model="idCard">

				</input>
			</view> -->


      <!-- <view class="tixiancenteritem" style="margin-top: 38rpx;border: 0;">
				<view class="tixiancenteritem1">
					认证商家
				</view>

			</view> -->

      <!-- <view class="renzhengshangjiaxuanze">
				<view class="renzhengshangjiaxuanzeitem" :class="current == 1 ? 'active' : ''"
					@click="changecurrent(1)">
					个人商家
				</view>
				<view class="renzhengshangjiaxuanzeitem" :class="current == 2 ? 'active' : ''"
					@click="changecurrent(2)">
					企业商家
				</view>
			</view> -->


      <!-- 	<view class="tixiancenteritem" style="margin-top: 38rpx;border: 0;">
				<view class="tixiancenteritem1">
					身份证正反面
				</view>

			</view> -->

      <!-- 	<view class="photoview">
				<view class="photoviewitem">
					<view class="photoviewitem_photo">
						<u-image src="../../static/businessImg/idfront.png" mode="" width='200' height="128"
							v-if="idHead == ''"></u-image>
						<u-image :src="idHead" mode="" width='200' height="128" v-else></u-image>
					</view>
					<view class="photoviewitem_bottom">
						<u-image src="../../static/businessImg/xiangji.png" mode="" width='34' height="30"></u-image>

						<view class="photoviewitem_bottom_text" @click="uploadHead">
							上传人像面
						</view>
					</view>
				</view>
				<view class="photoviewitem">
					<view class="photoviewitem_photo">
						<u-image src="../../static/businessImg/idback.png" mode="" width='200' height="128"
							v-if="idBack == ''"></u-image>
						<u-image :src="idBack" mode="" width='200' height="128" v-else></u-image>
					</view>
					<view class="photoviewitem_bottom">
						<u-image src="../../static/businessImg/xiangji.png" mode="" width='34' height="30"></u-image>

						<view class="photoviewitem_bottom_text" @click="uploadBack">
							上传国徽面
						</view>
					</view>
				</view>
			</view> -->



      <view class="picuploadlist">
        <view class="picuploadlistitem">
          <view class="picuploadlistitemtitle">
            店铺头像
          </view>

          <view class="picuploadlistitempic">
            <view class="detailImages" v-if="dptx != ''">
              <u-image :src="dptx" width="100%" height="100%" mode="scaleToFill"></u-image>
              <view class="deldiv1" @click="deldetailImages('dptx')"></view>
            </view>
            <view class="imageimg" @click="choosedetaipic('dptx')" v-else>
              <u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="scaleToFill">
              </u-image>
            </view>
          </view>
        </view>

        <!-- 			<view class="picuploadlistitem">
					<view class="picuploadlistitemtitle">
						营业执照照片
					</view>

					<view class="picuploadlistitempic">
						<view class="detailImages" v-if="yyzzzp != ''">
							<u-image :src="yyzzzp" width="100%" height="100%" mode="scaleToFill"></u-image>
							<view class="deldiv1" @click="deldetailImages('yyzzzp')"></view>
						</view>
						<view class="imageimg" @click="choosedetaipic('yyzzzp')" v-else>
							<u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="">
							</u-image>
						</view>
					</view>
				</view> -->

        <!-- <view style="width: 100%;height: 1rpx;background: #f3f3f3;margin-bottom: 20rpx;"></view> -->

        <!-- 	<view class="picuploadlistitem">
					<view class="picuploadlistitemtitle">
						食品经营许可证
					</view>

					<view class="picuploadlistitempic">
						<view class="detailImages" v-if="spjyxkz != '' ">
							<u-image :src="spjyxkz" width="100%" height="100%" mode="scaleToFill"></u-image>
							<view class="deldiv1" @click="deldetailImages('spjyxkz')"></view>
						</view>
						<view class="imageimg" @click="choosedetaipic('spjyxkz')" v-else>
							<u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="">
							</u-image>
						</view>
					</view>
				</view> -->

        <!-- 		<view class="picuploadlistitem">
					<view class="picuploadlistitemtitle">
						食品生产许可证
					</view>

					<view class="picuploadlistitempic">
						<view class="detailImages" v-if="spaqxkz !='' ">
							<u-image :src="spaqxkz" width="100%" height="100%" mode="scaleToFill"></u-image>
							<view class="deldiv1" @click="deldetailImages('spaqxkz')"></view>
						</view>
						<view class="imageimg" @click="choosedetaipic('spaqxkz')" v-else>
							<u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="">
							</u-image>
						</view>
					</view>
				</view>
 -->
        <!-- 	<view class="picuploadlistitem">
					<view class="picuploadlistitemtitle">
						预包装食品销售备案凭证
					</view>

					<view class="picuploadlistitempic">
						<view class="detailImages" v-if="ybzspxsbapz !='' ">
							<u-image :src="ybzspxsbapz" width="100%" height="100%" mode="scaleToFill"></u-image>
							<view class="deldiv1" @click="deldetailImages('ybzspxsbapz')"></view>
						</view>
						<view class="imageimg" @click="choosedetaipic('ybzspxsbapz')" v-else>
							<u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="">
							</u-image>
						</view>
					</view>
				</view> -->

        <!-- 	<view class="picuploadlistitem">
					<view class="picuploadlistitemtitle">
						国境口岸卫生许可证
					</view>

					<view class="picuploadlistitempic">
						<view class="detailImages" v-if="gjkawsxkz != '' ">
							<u-image :src="gjkawsxkz" width="100%" height="100%" mode="scaleToFill"></u-image>
							<view class="deldiv1" @click="deldetailImages('gjkawsxkz')"></view>
						</view>
						<view class="imageimg" @click="choosedetaipic('gjkawsxkz')" v-else>
							<u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="">
							</u-image>
						</view>
					</view>
				</view> -->
      </view>


      <!-- <view class="sichuanyi">
				四选一上传即可
			</view> -->


      <view class="textesad">
        提交申请代表您同意 <span style="color: #28C749;" @click="navigateTo('/pages/business/shangjiaruzhuxieyi')">
          《商家入驻协议协议》 </span>
      </view>


      <view class="tixianbtn" @click="handleTixian">
        提交申请
      </view>
    </view>


  </view>
</template>

<script>
import storage from "@/utils/storage.js";

import { storeApply } from "@/api/home.js";
import { supplierApply } from "@/api/gongyingshang.js";
export default {
  data() {
    return {
      name: "",
      // idCard: '',
      phone: "",
      // idHead: '',
      // idBack: '',
      storeName: "",
      current: 1,
      dptx: "",
      // yyzzzp: "",
      // spjyxkz: "",
      // spaqxkz: "",
      // ybzspxsbapz: "",
      // gjkawsxkz: ""
      canClick: true,
    };
  },

  methods: {
    back() {
      uni.navigateBack();
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },

    deldetailImages(name) {
      this[name] = "";
    },

    changecurrent(i) {
      this.current = i;
    },

    choosedetaipic(name) {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that[name] = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },

    uploadBack() {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that.idBack = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },

    uploadHead() {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that.idHead = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },
    handleTixian() {
      const {
        name,
        phone,
        // idBack,
        // idCard,
        // idHead,
        storeName,
        dptx,
        // yyzzzp,
        // spjyxkz,
        // spaqxkz,
        // ybzspxsbapz,
        // gjkawsxkz,
        current,
      } = this;
      if (
        name == "" ||
        phone == "" ||
        storeName == "" ||
        dptx == ""
        // || yyzzzp == '' || idCard == '' || idBack == '' || idHead == ''
      ) {
        return uni.showToast({
          icon: "none",
          title: "请填写完整信息",
        });
      }

      // if (spjyxkz == '' &&
      // 	spaqxkz == '' &&
      // 	ybzspxsbapz == '' &&
      // 	gjkawsxkz == '') {
      // 	return uni.showToast({
      // 		icon:'none',
      // 		title: '食品经营许可证，食品安全许可证，预包装食品销售备案凭证，国境口岸卫生许可证必须填写一个'
      // 	})
      // }
      if (!this.canClick) return;
      this.canClick = false;
      storeApply({
        userId: storage.getUserInfo().id,
        storeName,
        type: current,
        storeMobile: phone,
        image: dptx,
        // idHead,
        // idBack,
        // frontierCert: gjkawsxkz,
        // idCard,
        // foodProductionCert: spaqxkz,
        // foodPackingCert: ybzspxsbapz,
        // foodManageCert: spjyxkz,
        // businessLicense: yyzzzp
      })
        .then((res) => {
          this.canClick = true;
          if (res.code == "000000") {
            uni.showToast({
              icon: "none",
              title: "申请完成,等待审核",
            });

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        })
        .catch((_) => {
          this.canClick = true;
        });
    },
  },
};
</script>

<style scoped>
.tixian {
  width: 100%;
  min-height: 100vh;
  background: #f0f0f0;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

.tixiancenter {
  width: 703rpx;
  margin: 27rpx auto;
  background: #ffffff;
  padding: 36rpx;
}

.tixiancenteritem {
  height: 55rpx;
  width: 100%;
  line-height: 55rpx;
  border-bottom: 2rpx solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tixiancenteritem1 {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 25rpx;
  color: #000000;
  height: 100%;
  width: 50%;
  text-align: left;
}

.tixiancenteritem2 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 27rpx;
  color: #f14343;
  width: 50%;
  height: 100%;
  text-align: right;
}

.tixianbtn {
  width: 100%;
  height: 71rpx;
  line-height: 71rpx;
  text-align: center;
  margin: 36rpx auto;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  background: rgb(40, 199, 73);
  border-radius: 40rpx;
}

.tixianlast {
  width: 703rpx;
  height: 106rpx;
  padding: 0 35rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.tixianlasttitle {
  width: 50%;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}

.photoview {
  width: 100%;
  margin-top: 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.photoviewitem {
  width: 312rpx;
  height: 222rpx;
  background: rgb(247, 250, 253);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

.photoviewitem_photo {
  width: 312rpx;
  height: 159rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoviewitem_bottom {
  background: rgb(109, 120, 254);
  width: 100%;
  height: 63rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoviewitem_bottom_text {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 27rpx;
  color: #ffffff;
  padding-left: 11rpx;
}

.textesad {
  width: 100%;
  height: 23rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 23rpx;
  color: #979ba6;

  margin: 80rpx 0 40rpx 0;
  padding-left: 20rpx;
}

.renzhengshangjiaxuanze {
  width: 100%;
  display: flex;
  align-items: center;
  height: 80rpx;
  line-height: 62rpx;
  text-align: center;
  justify-content: flex-start;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 26rpx;
  color: #2f3254;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #f3f3f3;
}

.renzhengshangjiaxuanzeitem {
  width: 204rpx;
  height: 62rpx;
  margin-right: 20rpx;
  background: rgb(247, 248, 250);
}

.active {
  color: #ffffff;
  background: rgb(148, 207, 57);
}

.picuploadlist {
  width: 100%;
  margin-top: 55rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}

.picuploadlistitem {
  width: 50%;
  height: 202rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  margin-bottom: 20rpx;
}

.picuploadlistitemtitle {
  width: 100%;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #101624;
  height: 26rpx;
  line-height: 26rpx;
  text-align: center;
}

.picuploadlistitempic {
  width: 155rpx;
  height: 155rpx;
}

.detailImages {
  position: relative;
  width: 100%;
  height: 100%;
}

.imageimg {
  width: 100%;
  height: 100%;
}

.sichuanyi {
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 26rpx;
  color: #909090;
}

.deldiv1 {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}
</style>
